<template>
	<div>
		<vxe-table border resizable :tree-config="{ children: 'children' }" :expand-config="tableExpand" :data="tableData">
			<vxe-table-column type="expand" width="100" title="详细信息">
				<template #content="{ row }">
					<div>
						<el-form :model="form" size="small" label-width="100px" class="mt35 mb35">
							<el-row :gutter="35">
								<el-col :xs="24" :sm="12" :md="8" :lg="12" :xl="4" class="mb20">
									<el-form-item label=""> <span style="color: #99a9bf">就读学校：</span>{{ row.school }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="12" :xl="4" class="mb20">
									<el-form-item label=""> <span style="color: #99a9bf">专业：</span>{{ row.major }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="12" :xl="4" class="mb20">
									<el-form-item label=""> <span style="color: #99a9bf">入学时间：</span>{{ row.startdate }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="12" :xl="4" class="mb20">
									<el-form-item label=""> <span style="color: #99a9bf">结业时间：</span>{{ row.enddate }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="12" :xl="4" class="mb20">
									<el-form-item label=""> <span style="color: #99a9bf">学历：</span>{{ row.level }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="12" :xl="4" class="mb20">
									<el-form-item label=""> <span style="color: #99a9bf">学位：</span>{{ row.degree }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="12" :xl="4" class="mb20">
									<el-form-item label="">
										<span style="color: #99a9bf">教育证书照1：</span><br /><br />
										<el-image style="width: 400px; height: 300px" src="/@/assets/images/zhengshu1.jpg"></el-image>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="12" :xl="4" class="mb20">
									<el-form-item label="">
										<span style="color: #99a9bf">教育证书照2：</span><br /><br />
										<el-image style="width: 400px; height: 300px" src="/@/assets/images/zhengshu1.jpg"></el-image>
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</div>
				</template>
			</vxe-table-column>
			<vxe-table-column width="280" field="schooltime" title="时间"></vxe-table-column>
			<vxe-table-column width="200" field="school" title="就读院校"></vxe-table-column>
			<vxe-table-column width="200" field="level" title="学历"></vxe-table-column>
			<vxe-table-column width="308" field="voucher" title="证明人"></vxe-table-column>
		</vxe-table>
	</div>
</template>
<script lang="ts">
import { ref } from 'vue';
import { VxeTablePropTypes } from 'vxe-table';
import XEUtils from 'xe-utils';
import { useStore } from '/@/store/index.ts';
import { toRefs, reactive, onMounted, nextTick, computed, getCurrentInstance } from 'vue';
import axios from 'axios';
export default {
	name: 'Work',
	setup() {
		const store = useStore();
		const state = reactive({
			form: {},
		});
		// 获取用户信息 vuex
		const getUserInfos = computed(() => {
			return store.state.userInfos.userInfos;
		});
		const tableData = ref([
      {
        schooltime:'2014年09月-2018年06月',
				school:'北京大学',
        major:'计算机科学与技术',
				startdate: '2014年09月',
				enddate: '2018年06月',
				degree: '学士',
				voucher:'张泽',
        img1:'zhengshu1',
        img2:'/@/assets/images/zhengshu1.jpg',
        level:'本科'
			},
			{
        schooltime:'2011年09月-2014年06月',
				school:'某某省某某市某某中学',
        major:'-',
				startdate: '2011年09月',
				enddate: '2014年06月',
				degree: '-',
				voucher:'李湘',
        img1:'-',
        img2:'-',
        level:'高中'
			},
			{
        schooltime:'2008年09月-2011年06月',
				school:'某某省某某市某某中学',
        major:'',
				startdate: '2008年09月',
				enddate: '2011年06月',
				degree: '-',
				voucher:'刘宇飞',
        img1:'-',
        img2:'-',
        level:'初中'
			},
      {
        schooltime:'2002年09月-2008年06月',
				school:'某某省某某市某某小学',
        major:'-',
				startdate: '2002年09月',
				enddate:'2008年06月',
				degree: '-',
				voucher:'易里里',
        img1:'-',
        img2:'-',
        level:'小学'
			}
		]);

		const tableExpand = ref({
			lazy: true,
			loadMethod({ row }) {
				return new Promise((resolve) => {
					setTimeout(() => {
						// 随机生成列
						const childCols = XEUtils.sample(
							[
								{ type: 'seq', title: 'Sequence' },
								{ field: 'name', title: 'Name' },
								{ field: 'role', title: 'Role' },
								{ field: 'age', title: 'Age' },
								{ field: 'sex', title: 'Sex' },
							],
							XEUtils.random(3, 5)
						);
						// 随机生成数据
						const childData = XEUtils.sample(
							[
								{ name: 'TEST1', role: 'Develop', age: 20, sex: '女' },
								{ name: 'TEST2', role: 'Develop', age: 22, sex: '女' },
								{ name: 'TEST3', role: 'Develop', age: 24, sex: '男' },
								{ name: 'TEST4', role: 'Develop', age: 26, sex: '女' },
								{ name: 'TEST5', role: 'Develop', age: 28, sex: '男' },
								{ name: 'TEST6', role: 'Develop', age: 30, sex: '男' },
							],
							XEUtils.random(1, 5)
						);
						row.childCols = childCols;
						row.childData = childData;
						resolve();
					}, 500);
				});
			},
		} as VxeTablePropTypes.ExpandConfig);
		return {
			tableData,
			tableExpand,
			getUserInfos,
			...toRefs(state),
		};
	},
	data() {
		return {
			StaffArchives: '',
		};
	},
	created() {
		// 设置一个间隔1s就进行的动作
		var that = this;
		axios
			.get('http://121.41.117.22:8081/staff-archives/staffname=' + that.getUserInfos.userName)
			.then(function (response) {
				that.StaffArchives = response.data[0];
			})
			.catch(function (err) {});
	},
};
</script>
<style lang="scss">
</style>